<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <div >
        <!-- 头部区域 -->
        <div class="header">
            <h5>Free Shipping For Orders Over $50</h5>
        </div>
        <!-- 导航栏区域 -->
        <div class="nav">
            <div class="leftsidebar">
                <a href="javascript:;">
                    AROTY
                </a> 
                <span></span>
            </div>
            <div class="mainbav hidden-md hidden-sm hidden-xs">
                <ul class="subnav">
                    <li class="current">
                        <a href="javascript:;">HOME</a> 
                    </li>
                    <li >
                        <a href="javascript:;">SHOP</a> 
                    </li>
                    <li >
                        <a href="javascript:;">BLOG</a>
                    </li>
                    <li >
                        <a href="javascript:;">PAGES</a>
                    </li>
                    <li >
                        <a href="javascript:;">CONTACTUS</a>
                    </li>
                    <li >
                        <span></span>
                        <a href="javascript:;" class="glyphicon glyphicon-search"></a>
                        
                    </li>
                    <li>
                        <img src="images/shopbag.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 大图 -->
        <div class="bigpic col-md-12">
            <img src="images/main.png" alt="">
        </div>
        <!-- 主体部分 -->
        <div class="mian container ">
            <div class="row">
                <div class="recommend">
                    <ul>
                        <li class="col-md-3"> 
                            <a href="javascript:;">
                                <img src="images/pic1.png" alt="">
                            </a>
                        </li>
                        <li class="four col-md-6"> 
                                <ul>
                                    <li class="col-md-5">
                                        <img src="images/pic2.png" alt="">
                                    </li>
                                    <li class="col-md-7">
                                        <img src="images/pic3.png" alt="">
                                    </li>
                                    <li class="col-md-5 col-md-push-7">
                                        <img src="images/pic5.png" alt="">
                                    </li>
                                    <li class="col-md-7 col-md-pull-5">
                                        <img src="images/pic4.png" alt="">
                                    </li>
                                </ul>
                        </li>
                        <li class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/pic6.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
                <div class="product">
                    <h4>Check Our Products</h4>
                    <div class="products">
                        <ul>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/sale1.png" alt="">
                                    <p>Active Fleece Pants</p>
                                    <span>$14.95</span>
                                    <strong>$10.00</strong>
                                </a>
                            </li><li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s2.png" alt="">
                                    <p>Striped Stretchie</p>
                                    <strong>$17.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s3.png" alt="">
                                    <p>Layette Scratch</p>
                                    <strong>$6.29</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s4.png" alt="">
                                    <p>Water Repellent Parka</p>
                                    <strong>$4.5</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s5.png" alt="">
                                    <p>Bag With Braided Handle</p>
                                    <strong>$16.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s6.png" alt="">
                                    <p>Piain Scarf With fringing</p>
                                    <strong>$58.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s7.png" alt="">
                                    <p>Feather Down Jacket</p>
                                    <strong>$63.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s8.png" alt="">
                                    <p>Plain Scarf With Fringing</p>
                                    <strong>$62.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s9.png" alt="">
                                    <p>The Frog T-shirt</p>
                                    <span>$51.00</span>
                                    <strong>$41.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s10.png" alt="">
                                    <p>Against aging</p>
                                    <strong>$60.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s11.png" alt="">
                                    <p>Asymmetric Textured Cape</p>
                                    <strong>$87.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s12.png" alt="">
                                    <p>Hooded Cotton Cape</p>
                                    <strong>$45.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s13.png" alt="">
                                    <p>Sweatshirt With Pouch Pocket</p>
                                    <strong>$93.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s14.png" alt="">
                                    <p>FIne Knit Hat</p>
                                    <span>$51.00</span>
                                    <strong>$41.00</strong>
                                </a>
                            </li>
                            <li class="sales">
                                <a href="javascript:;">
                                    <img src="images/s15.png" alt="">
                                    <p>BIker Hoodie</p>
                                    <strong>$56.00</strong>
                                </a>
                            </li>
                        </ul>
                        
                    </div>
                </div>
            
         </div>
         <!-- 底部 news部分-->
         <div class="news">
             <a href="#">
             <h5>VIEW ALL PRODUCT</h5>
            </a>
             <div class="newletter">
                 <a href="#">
                    <h2>NewsLetter</h2>
                 <p>Get timely updates from your favorite products.</p></a>
                 <form action="#" >
                    <div class="box">
                        <input type="search"  placeholder="Your e-mail" class="sss search" b/>
                        <button>
                            <img src="images/search.png" alt="">
                        </button>
                    </div>
                </input>
                  </form>
                  <img src="images/news.png" alt="" class="news-img">
             </div>
         </div>
         <div class="footer">
             <ul>
                 <li>
                     <a href="javascript:;" class="AROTY">
                        <strong>AROTY</strong>
                        <span></span>
                        <p>There are many variations of passages of Lorem lpsum available,
                            but the majority havesuffered alteration in some form, by injectedhumour,
                            or randomised words which don'tlook even slightly believable.
                        </p>
                        <img src="images/f1.png" alt="">
                    </a>
                 </li>
                 <li class="useful">
                    <dl>
                        <dt>
                           <a href="#">
                            Useful Links
                           </a></dt>
                        <dd>
                            <a href="#">
                                Home
                               </a></dd>
                        <dd>
                            <a href="#">
                                Cart
                               </a></dd>
                        <dd>
                            <a href="#">
                                Man fashion
                               </a></dd>
                        <dd>
                            <a href="#">
                                CHeckout
                               </a></dd>
                        <dd><a href="#">
                            Woman fashion
                           </a></dd>
                        <dd><a href="#">
                            My Account
                           </a></dd>
                        <dd><a href="#">
                            Accessories
                           </a></dd>
                        <dd><a href="#">
                            Ourder Tracking
                           </a></dd>
                        <dd><a href="#">
                            Collection
                           </a></dd>
                        <dd><a href="#">
                            Privacy Policy
                           </a></dd>
                    </dl>
                 </li>
                 <li class="contact">
                    <dl>
                        <dt>Contact Us</dt>
                        <dd><img src="images/c1.png" alt=""></dd>
                        <dd>
                            622 Dixie Path,South Tobinches-ter-UT 98336
                        </dd>
                        <dd><img src="images/c2.png" alt=""></dd>
                        <dd>
                            +149-845-9488
                        </dd>
                        <dd><img src="images/c3.png" alt=""></dd>
                        <dd>
                            Examlple@eamil.com
                        </dd>
                        <dd>
                            <a href="javascript:;">
                                <img src="images/c4.png" alt="">
                            </a>  
                            <a href="javascript:;">
                                <img src="images/c5.png" alt="">
                            </a>  
                            <a href="javascript:;">
                                <img src="images/c6.png" alt="">
                            </a>  
                            <a href="javascript:;">
                                <img src="images/c7.png" alt="">
                            </a>    
                            <a href="javascript:;">
                                <img src="images/c8.png" alt="">
                            </a>     
                        </dd>
                    </dl>
                    
                 </li>
             </ul>

        </div>
        <div class="copy col-md-12 hidden-sm hidden-xs" >
            copyrightc 2019 Aroty.All Rights Reserved.
        </div>
         
    </div>

    
</body>
</html>